import CForm from '@/components/form'
import {CnBoldSpan, CnNormalSpan} from '@/components/text'
import useCountDown from '@/hooks/coundDown'
import useGlobalAPI from '@/hooks/useGlobalAPI'
import {FormInstance} from 'ant-design-vue'
import './login.less'
const logo_img_url = '/static/img/Logo_blue.png'

const SendAuthCode = defineComponent({
  setup() {
    const {counDownStart, countDownText, isCountDownStart, starting} = useCountDown({
      startVal: 60,
      seconds: 60
    })

    return () => (
      <div
        class='w-100 h-40 rounded-2 text-white flex justify-center items-center  flex-nowrap'
        style={{
          backgroundColor: '#6b708a'
        }}
        onClick={() => {
          isCountDownStart.value && counDownStart()
        }}
      >
        <a-spin spinning={starting.value} size='small'>
          <CnNormalSpan
            class='text-16 truncate'
            style={{
              color: '#FFFFFFD9 !important'
            }}
          >
            {countDownText.value}
          </CnNormalSpan>
        </a-spin>
      </div>
    )
  }
})

const UserPhoneLogin = defineComponent({
  name: 'UserPhoneLogin',
  setup() {
    const {router, store} = useGlobalAPI()

    const state = reactive({
      platFormUserName: '',
      platFormUserPass: ''
    })

    /**提交表单且数据验证成功后回调事件 */
    const handle_form_finish = async (formRef: FormInstance | undefined) => {
      store
        .dispatch('login/LOGIN', {
          userName: state.platFormUserName,
          userPass: state.platFormUserPass
        })
        .then(res => {
          router.push('/CBC')
        })
        .catch(err => {})
    }

    return () => (
      <CForm
        class='w-full mt-46'
        v-model={[state, 'model']}
        onFormSubmit={() => {}}
        onFormReset={() => {}}
        labelCol={{
          span: 0
        }}
        wrapperCol={{
          span: 24
        }}
      >
        <a-form-item name='userName'>
          <a-input
            v-model={[state.platFormUserName, 'value', ['number', 'trim']]}
            class='pl-12 form-input-bg h-40 rounded-2 text-16'
            placeholder='请输入手机号'
          >
            {{
              prefix: () => <i class='iconfont icon-touxiang text-info'></i>
            }}
          </a-input>
        </a-form-item>

        <a-form-item name='dictDesc'>
          <div class='flex justify-between items-center'>
            <a-input
              v-model={[state.platFormUserPass, 'value', ['trim']]}
              class='pl-12 form-input-bg h-40 mr-8 rounded-2 text-16'
              placeholder='请输入验证码'
            >
              {{
                prefix: () => <i class='iconfont icon-xiugaimima text-info'></i>
              }}
            </a-input>
            <SendAuthCode></SendAuthCode>
          </div>
        </a-form-item>

        <a-form-item>
          <a-button type='primary' class='w-full rounded' html-type='submit'>
            <span class='text-white'>登录</span>
          </a-button>
        </a-form-item>
      </CForm>
    )
  }
})

const UserAccountLogin = defineComponent({
  name: 'UserAccountLogin',
  setup() {
    const {router, store} = useGlobalAPI()

    const state = reactive({
      platFormUserName: '',
      platFormUserPass: ''
    })

    /**提交表单且数据验证成功后回调事件 */
    const handle_form_finish = async (formRef: FormInstance | undefined) => {
      store
        .dispatch('login/LOGIN', {
          userName: state.platFormUserName,
          userPass: state.platFormUserPass
        })
        .then(res => {
          router.push('/CBC')
        })
        .catch(err => {})
    }

    return () => (
      <CForm
        class='w-full mt-46'
        v-model={[state, 'model']}
        onFormSubmit={handle_form_finish}
        onFormReset={() => {}}
        labelCol={{
          span: 0
        }}
        wrapperCol={{
          span: 24
        }}
      >
        <a-form-item name='platFormUserName'>
          <a-input
            v-model={[state.platFormUserName, 'value', ['trim']]}
            class='form-input-bg h-40 pl-12 rounded-2 text-16'
            placeholder='账号'
          >
            {{
              prefix: () => <i class='iconfont icon-touxiang text-info'></i>
            }}
          </a-input>
        </a-form-item>
        <a-form-item name='platFormUserPass'>
          <a-input
            v-model={[state.platFormUserPass, 'value', ['trim']]}
            class='pl-12 form-input-bg h-40 rounded-2 text-16'
            placeholder='密码'
            type='password'
          >
            {{
              prefix: () => <i class='iconfont icon-xiugaimima text-info'></i>
            }}
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button type='primary' class='w-full rounded' html-type='submit'>
            <span class='text-white'>登录</span>
          </a-button>
        </a-form-item>
      </CForm>
    )
  }
})

export default defineComponent({
  name: 'login',
  setup() {
    const state = reactive({
      activeKey: '2'
    })
    onMounted(() => {
      // new Ckline({svgId: 'cSvg'})
    })
    return () => (
      <div class='login w-full h-full relative bg-main'>
        <div
          class='w-540 h-560 px-86 overflow-hidden'
          style={{
            backgroundColor: '#4b516a'
          }}
        >
          <a-tabs class='w-full mt-96' v-model={[state.activeKey, 'activeKey']}>
            <a-tab-pane key='1'>
              {{
                default: () => <UserPhoneLogin></UserPhoneLogin>,
                tab: () => <CnNormalSpan class='text-white text-20'>手机登录</CnNormalSpan>
              }}
            </a-tab-pane>
            <a-tab-pane key='2'>
              {{
                default: () => <UserAccountLogin></UserAccountLogin>,
                tab: () => <CnNormalSpan class='text-white text-20'>账号登录</CnNormalSpan>
              }}
            </a-tab-pane>
            <a-tab-pane key='3'>
              {{
                default: () => <UserAccountLogin></UserAccountLogin>,
                tab: () => <CnNormalSpan class='text-white text-20'>扫码登录</CnNormalSpan>
              }}
            </a-tab-pane>
          </a-tabs>
        </div>
      </div>
    )
  }
})
